import React, { memo, useEffect, useRef, useState } from 'react'
import { Carousel, Image } from 'antd'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'

// 导入 关于图片的 常量
import { PlaceholderImg, ImgError } from '../../../../../constant/local-constant'
import { getBanner } from '../../../../../api/otherApi'
import { JingcaituijianBox, ImgI } from './style'
export default memo(function Jingcaituijian(props) {
  // state
  const [list, setList] = useState([])
  const CarouselRef = useRef()
  // redux hooks

  // other hooks
  useEffect(() => {
    getBanner().then(res => {
      setList(res.banners)
    })
  }, [])
  // other handle




  return (
    <JingcaituijianBox>
      <div className="wrap">
        <div className="title">
          <h2>精彩推荐</h2>
        </div>
        <Carousel
          ref={CarouselRef}
          autoplay={true}
        >

          {
            list.map((item, index) => {
              if (index % 2 === 0) {
                return (
                  <div className="banner_main" key={index}>
                    {
                      list.slice(index, index + 2).map((itemm, indexx) => {
                        return (
                          <a href={itemm.url} key={indexx} target="_blank">
                            <div className="banner_main_box">
                              <Image
                                width={590}
                                height={260}
                                src={itemm.imageUrl}
                                preview={false}
                                fallback={ImgError}
                                placeholder={
                                  <Image
                                    preview={false}
                                    width={590}
                                    height={260}
                                    src={PlaceholderImg}
                                  />
                                }
                              />
                              <ImgI titleColor={itemm.titleColor}>{itemm.typeTitle}</ImgI>
                            </div>
                          </a>
                        )
                      })
                    }
                  </div>
                )
              }
            })
          }
        </Carousel>
        <i className="pre toggle" onClick={e => { CarouselRef.current.prev() }}>
          <LeftOutlined />
        </i>
        <i className="next toggle" onClick={e => { CarouselRef.current.next() }}>
          <RightOutlined />
        </i>
      </div>

    </JingcaituijianBox>
  )
})
